<template>
  <page-wrap title="职业测评" ref="pageWrap" hideTab back :showTop="false" :dark="true" hideSafeArea :bg-color="uNavColor">
    <view class="allContainer" :style="[{ position: 'relative' }]">
      <view :style="[
        { position: 'fixed' },
        { zIndex: '900' },
        { width: '750rpx' },
        { backgroundColor: tabsListBgColor },
      ]">
        <view :style="[{ width: '100%' }, { height: '180rpx' }]"></view>
        <u-tabs v-if="false" class="tabsList" :current="currentIndex" name="tagName" :list="tabList"
          @change="handleChangeTabs" height="55" :active-item-style="activeItemStyle" :bg-color="transform" :gutter="24"
          :bar-style="barStyle" font-size="28" :inactive-color="'#75957f'"></u-tabs>
      </view>

      <image :src="coverImgUrl" :style="[{ width: '750rpx' }, { height: '1287rpx' }]" />

      <view class="baseBgBox">
        <!-- 个性特征描述  -->
        <JuniorPersonFeature class="PersonFeature" :personalityTraits="mbitTraits" :mbti="mbti"
          @listenRect="listenRect" />
        <!-- <PersonBlindSpot v-if="false" class="PersonBlindSpot" :personalBlindSpots="personalBlindSpots"
          @listenRect="listenRect" />
        <WorkAdvantage v-if="false" class="WorkAdvantage" :workAdvantages="workAdvantages" @listenRect="listenRect" />
        <WorkInferiority v-if="false" class="WorkInferiority" :workDisadvantages="workDisadvantages"
          @listenRect="listenRect" />
        <OccupationType v-if="false" class="OccupationType" :careerCategory="careerCategory" @listenRect="listenRect" />
        <QuestionSolve v-if="false" class="QuestionSolve" :problemSolving="problemSolving" :protectorName="protectorName"
          :maxScoreDimension="maxScoreDimension" :minScoreDimension="minScoreDimension" :radarChart="radarChart"
          @listenRect="listenRect" />
        <PersonDevelop v-if="false" class="PersonDevelop" :developmentAdvice="developmentAdvice"
          @listenRect="listenRect" />
        <CareerBook v-if="fromWhere == 'careerPath'" class="CareerBook" :careerNames="careerNames"
          :protectorName="protectorName" @listenRect="listenRect" :personId="personId" /> -->

        <image src="https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_end.png"
          :style="[{ width: '750rpx' }, { height: '260rpx' }]" />
      </view>

      <!-- <view class="style-go-to-consult-container">
        <image :src="bannerUrl" v-if="bannerUrl" mode="widthFix" :show-menu-by-longpress="careerPathSaleClientId == 123"
          @click="goToConsult" />
      </view> -->
    </view>
  </page-wrap>
</template>

<script>
import PersonFeature from "./PersonFeature.vue";
import PersonBlindSpot from "./PersonBlindSpot.vue";
import WorkAdvantage from "./WorkAdvantage.vue";
import WorkInferiority from "./WorkInferiority.vue";
import OccupationType from "./OccupationType.vue";
import QuestionSolve from "./QuestionSolve.vue";
import PersonDevelop from "./PersonDevelop.vue";
import CareerBook from "./CareerBook.vue";
import JuniorPersonFeature from "./JuniorPersonFeature.vue";
import { showDelayToastTip, getDivineBeastCover } from "@/utils/handle";
import { careerAssessRegularInfo } from "@/utils/data";
import { addBuryingPoint } from "@/api/modules/career";
export default {
  components: {
    PersonFeature,
    PersonBlindSpot,
    WorkAdvantage,
    WorkInferiority,
    OccupationType,
    QuestionSolve,
    PersonDevelop,
    CareerBook,
    JuniorPersonFeature,
  },
  props: {
    scrollRes: {
      type: Object,
      default: function () {
        return {};
      },
    },
    resultInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
    fromWhere: {
      type: String,
      default: "",
    },
    toBook: {
      type: String,
      default: "false",
    },
    personId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      bannerUrl: "",
      careerPathSaleClientId: "",
      isBlur: true,
      screenWidth: 0,
      screenHeight: 0,
      uNavColor: "transparent",
      tabsListBgColor: "transparent",
      currentIndex: 0,
      scrollDomId: "",
      showTop: false,
      activeItemStyle: careerAssessRegularInfo.activeItemStyle,
      barStyle: careerAssessRegularInfo.barStyle,
      payStatus: 0, // 是否解锁 1-已经解锁 0-未解锁
      coverImgUrl: careerAssessRegularInfo.coverImgUrl,
      tabList: careerAssessRegularInfo.tabList,
      barTopDistance: careerAssessRegularInfo.barTopDistance,
      partHeightPxList: careerAssessRegularInfo.partHeightPxList,
      // 是否是通过点击切换模块
      isChangeTabByClick: false,
      currentScrollTop: 0,
      personalityTraits: [],
      mbitTraits: [],
      personalBlindSpots: {},
      workAdvantages: {},
      workDisadvantages: {},
      careerCategory: {},
      features: {},
      problemSolving: {},
      developmentAdvice: {},
      protectorName: "",
      maxScoreDimension: {},
      minScoreDimension: {},
      radarChart: [],
      careerNames: [],
      mbti: "",
      buryingPointId: "",
      cardType: "",
    };
  },

  watch: {
    resultInfo: {
      handler(val) {
        console.log("val", val);
        this.personalityTraits = val.personalityTraits;
        this.mbitTraits = val.mbitTraits;
        this.mbti = val.dataType;
        this.personalBlindSpots = val.personalBlindSpots;
        this.workAdvantages = val.workAdvantages;
        this.workDisadvantages = val.workDisadvantages;
        this.careerCategory = val.careerCategory;
        this.features = val.features;
        this.problemSolving = val.problemSolving;
        this.developmentAdvice = val.developmentAdvice;
        // this.careerNames = val.careerCategory.descList;
        this.protectorName = val.protectorName;
        this.maxScoreDimension = val.maxScoreDimension;
        this.minScoreDimension = val.minScoreDimension;
        this.radarChart = val.radarChart;
        this.coverImgUrl = getDivineBeastCover(val.dataType);
      },
      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },

    scrollRes: {
      handler(val) {
        this.onThisPageScroll(val);
      },
      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },

    fromWhere: {
      handler(val) {
        console.log(this.tabList, "this.tabList-----");
        if (val == "careerPath") {
          const temp = this.tabList.find((item) => item.name == "职业报告");
          if (!temp) {
            this.tabList.push({ name: "职业报告" });
          }
        }
      },
      immediate: true,
    },
    toBook: {
      handler(val) {
        if (val == "true") {
          this.handleChangeTabs(7);
          this.$nextTick(() => {
            uni.pageScrollTo({
              scrollTop: 99999,
              duration: 0,
            });
          });
        }
      },
      immediate: true,
    },
  },

  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenWidth = systemInfo.windowWidth;
    this.screenHeight = systemInfo.windowHeight;
  },
  created() {
    this.careerPathSaleClientId = getApp().globalData.careerPathSaleClientId;
    if (this.careerPathSaleClientId) {
      switch (this.careerPathSaleClientId) {
        case "123":
          this.setBannerUrl(
            "https:" +
              this.$imgBaseSelf +
              "career/positionDictionary/goodMajor0607.jpg"
          ); //绿色扫码图
          break;
        case "sznews":
          this.setBannerUrl(
            "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/greenNew.png"
          );
          break;
        case "gz":
          this.setBannerUrl(
            "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/greenNew.png"
          ); //绿色点击图
          break;

        default:
          break;
      }
    } else {
      this.setBannerUrl(
        "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/greenNew.png"
      );
    }
  },
  mounted() {},

  destroyed() {
    // 清除职业报告，以解决从职业测评进来也有“职业报告”的数据残留
    const index = this.tabList.findIndex((item) => item.name == "职业报告");
    if (index >= 0) {
      this.tabList.splice(index, 1);
      console.log(this.tabList, "this.tabList======");
    }
  },

  methods: {
    setBannerUrl(url) {
      const that = this;
      wx.downloadFile({
        url,
        success: function (res) {
          if (res.statusCode === 200) {
            that.bannerUrl = res.tempFilePath;
          }
        },
        fail: function (err) {
          console.log("下载失败", err);
        },
      });
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    goToConsult() {
      this.addBuryingPointFn(20100, "", "", "", "");
      if (this.careerPathSaleClientId == 123) {
        return;
      } else if (!this.careerPathSaleClientId) {
        uni.navigateToMiniProgram({
          appId: "wx614f8a78fff34162",
          path: "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128317245100125",
          success(res) {},
          fail(err) {},
        });
      } else if (this.careerPathSaleClientId == "sznews") {
        wx.reportEvent("sznews_qrcode_click_jump", {});
        uni.navigateToMiniProgram({
          appId: "wx614f8a78fff34162",
          path: "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128377299100125",
          success(res) {},
          fail(err) {},
        });
      } else if (this.careerPathSaleClientId == "gz") {
        //贵州
        wx.reportEvent("sznews_qrcode_click_jump", {});
        uni.navigateToMiniProgram({
          appId: "wx614f8a78fff34162",
          path: "/ec_goods/detail?vid=0&productInstanceId=16868908125&id=128397590100125",
          success(res) {},
          fail(err) {},
        });
      }
      console.log("---consult_help_career_assess_result_click------>");
      wx.reportEvent("consult_help_career_assess_result_click", {}); //职业测评结果页 — 点击咨询
      this.addBuryingPointFn(20066, "", "", "", "");

      return;
      uni.navigateTo({
        url: "/pagesSub/career/activity/JuniorCareerConsultantBuy",
      });
    },
    handleToBook() {},
    listenRect(rect, index) {
      console.log("rect.height = " + rect.height + ", index = " + index);
      this.partHeightPxList[index] = rect.height;
    },
    onThisPageScroll(res) {
      this.currentScrollTop = res.scrollTop;

      if (res.scrollTop > 0) {
        this.uNavColor = "#ffffff";
        this.tabsListBgColor = "#ccdec1";
      } else {
        this.uNavColor = "transparent";
        this.tabsListBgColor = "transparent";
      }
      this.calculateScrollDistanceByScrollTop();
      this.isChangeTabByClick = false;
    },
    calculateScrollDistanceByScrollTop() {
      if (this.isChangeTabByClick) {
        return;
      }
      var distance = 0;
      for (var i = 0; i < 9; i++) {
        distance += this.partHeightPxList[i];
        if (this.currentScrollTop < distance - this.barTopDistance) {
          if (i <= 1) {
            this.currentIndex = 0;
            return;
          }
          this.currentIndex = i;
          return;
        }
      }
    },
    calculateScrollDistance(index) {
      if (index == 0) {
        return this.partHeightPxList[0];
      }
      var result = 0;
      for (var i = 0; i <= index; i++) {
        result += this.partHeightPxList[i];
      }
      return result;
    },
    handleChangeTabs(index) {
      console.log("index = " + index);
      this.currentIndex = index;
      this.isChangeTabByClick = true;
      console.log(
        "点击",
        this.calculateScrollDistance(index),
        this.barTopDistance
      );
      uni.pageScrollTo({
        scrollTop: this.calculateScrollDistance(index) - this.barTopDistance,
        duration: 0,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.allContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.baseBgBox {
  width: 100%;
  background-size: 100% 100%;
  background-image: url($img-base + "career/careerAssessResult/base_bg.png");
  background-repeat: no-repeat;
}

.style-go-to-consult-container {
  position: fixed;
  width: 100%;
  bottom: 85rpx;
  // height: 90rpx;
  z-index: 999;
  margin: 0 32rpx;

  image {
    width: calc(100vw - 64rpx);
    height: 218rpx;
  }

  .style-go-to-consult-btn {
    margin-left: 33rpx;
    margin-right: 33rpx;
    height: 100%;
    background-color: #f37a33;
    color: #fefefe;
    border-radius: 10rpx;
    font-size: 36rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
}
</style>
